<template>
  <div class="app-page">
    <div class="proDetail clearfix" v-if="isTest">
      <div class="proImg">
        <img src="../../../assets/image/publicTest/freeTestSubmitImg.jpg" />
      </div>
      <div class="proInfo">
        <h2>夏季车享家定制博世新风翼雨刷（1对）</h2>
        <ul class="des">
          <li>U型接口无骨雨刷   安装简单</li>
          <li>稳固一体式导流设计减少风噪</li>
        </ul>
      </div>
    </div>
    <div class="proDetail" v-else>
      <div class="proImg">
        <img :src="dataArr.picture" />
      </div>
      <div class="proInfo">
        <h2> {{ dataArr.title }}</h2>
        <ul class="des">
          <li v-for="(item,index) in dataArr.subtitle">{{ item }}</li>
        </ul>
      </div>
    </div>
    <div class="myform">
      <h2 ca="zc_v170628_tjdetail_infoclick"><i class="info" @click="isPlanTips=true" ></i>众测计划</h2>
      <textarea class="inputarea" name="plan" placeholder="请输入你的众测计划，这将成为我们筛选申请成功名
  单的主要条件，众测计划小提示请见右上方哦!" @keyup="limitStr"></textarea>      
    </div>

    <a href="javascript:;" class="sbtn" :class="{'gray':isgray}" @click="sub" ca="zc_v170628_tjdetail_tjclick">{{submitText}}</a>

    <div class="dialog" v-if="isSucessTips">
      <div class="shadow"></div>
      <div class="dialog-cnt sub">
        <i class="icon-sure"></i>
        <h3>提交成功</h3>
        <p class="des">请耐心等待入选名单的公布</p>
        <i class="close close-sub" @click="isSucessTips=false" ></i>
      </div>
      
    </div>
    <div class="dialog" v-if="isPlanTips">
      <div class="shadow"></div>
      <div class="dialog-cnt">
        <h2>众测计划提示</h2>
        <div>
          <h5>1.拟定您【众测报告】的提纲，可以回答以下问题：</h5>          
          <p>对于本次服务或产品有什么期待；</p>
          <p>准备从服务或产品的特点撰写报告；</p>
          <p>对服务或产品您可能有哪些内容可以和大家分享。</p>
          <h5>2.【众测计划】结构越是清晰，越是丰富，被选择的机率就越大；</h5>
          <h5>3. 请在【众测计划】文末留下以下信息：车型车龄信息、所在城市、联系方式（手机号或微信号）。</h5>
        </div>
         <i class="close" @click="isPlanTips=false"></i>
      </div>
     
    </div>
  </div>
  
</template>

<style lang="scss" scope>
@import '../../../assets/css/common.scss';

*,*:before,*:after{box-sizing:border-box}
.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}

html,body{height:100%;}
body{background:#f5f5f5;margin:0 auto;}
.shadow{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,.8);z-index:11;}
img{max-width:100%}
.gray{background:#bfbfbf!important;color:#fff;pointer-events:none;}
.app-page{
  .proDetail{padding:rem(15) rem(16);border-bottom:1px solid #d9d9d9;display:table;width:100%;max-height:rem(130);overflow:hidden;
    .proImg{width:rem(116);margin-right:rem(18);}
    .proInfo{display:table-cell;vertical-align:middle;
      h2{font-size:rem(19);color:#0a1825;margin-bottom:rem(5)}
      .des{
        li{color:#707070;position:relative;padding-left:rem(8);
          &:before{content:'';position:absolute;top:rem(3);left:0;display:block;width:rem(5);height:rem(5);background:#898989;border-radius:50%;}
        }
      }
    }
    
  }
  .content{padding:rem(10)}
  .shareGuide{width:rem(30);height:rem(30);line-height:rem(30);text-align:center;color:$_fff;background:#666;border-radius:50%;position:fixed;right:rem(10);top:50%;z-index:3;}

  .myform{position:relative;margin-top:rem(12.5);
    h2{font-size:rem(16);color:#1f2730;padding:rem(6.5) rem(15) rem(15) rem(20);border-bottom:1px solid #e7e7e7;}
    .info{width:rem(24);height:rem(24);position:absolute;right:rem(15);top:0;z-index:1;background:url(../../../assets/image/publicTest/wen.png) no-repeat;background-size:contain;}
    .inputarea{width:100%;height:rem(300);background:#fafafa;padding:rem(12) rem(17);border:none;font-size:rem(14);line-height:1.8;}
  }
  .tips{padding:rem(10);position:absolute;top:0;left:0;z-index:3;}
  .sbtn{
    position: fixed;
    bottom: 0;
    width: rem(355);
    background:#ff3b3b;
    font-size:rem(17);
    padding:rem(13);
    font-weight:bold;
    border-radius:rem(5);
    display:block;
    text-align:center;
    margin:rem(20) rem(10) rem(10);
    color:$_fff;
    &:hover{background:#fa1d1d;}
  }
  .dialog{position:absolute;width:100%;height:100%;top:0;left:0;
    .dialog-cnt{width:80%;margin:0 10%;min-height:rem(330);padding:rem(10) rem(18);color:#464848;background:$_fff;border-radius:rem(10);position:fixed;top:15%;z-index:11;
      .icon-sure{display:inline-block;width:rem(93);height:rem(93);background:url(../../../assets/image/publicTest/icon-sure.png) no-repeat;background-size:contain;}
      h2{text-align:center;padding:rem(12) 0;font-size:rem(20);}
      h3{font-size:rem(22);color:#243742;padding:rem(12) 0;}
      h5{font-size:rem(14);line-height:2;}
      p{font-size:rem(13);line-height:1.8;}
      .des{font-size:rem(17);color:#4f5b63;}
    }
    .sub{text-align:center;padding-top:rem(83);}
    .close{width:rem(31);height:rem(31);display:block;position:absolute;top:rem(380);left:50%;margin-left:rem(-16);z-index:11;background:url(../../../assets/image/publicTest/icon-close.png) no-repeat;background-size:contain;}
    .close-sub{top:rem(350);}
  }
  
}
</style>

<script>
import common from "../../../assets/js/common.js";
import {Toast} from 'mint-ui';
export default {
  data (){
    return {
      loginUrl:common.isdev() + '/zhongce/checkLogin.htm?sid=',
      isLogin:false,
      proDetailUrl:common.isdev() + '/zhongce/item.htm',//商品接口 需带sid
      dataArr:{},
      isgray: sessionStorage.getItem('isSubmit') ? true : false,
      submitUrl:common.isdev() + '/zhongce/apply.htm',
      isSucessTips:false,
      isPlanTips:false,
      sid:common.getQueryString('sid') ? common.getQueryString('sid') : '',
      isTest:false,
      isShowShareBtn:common.checkAppversionIsGt35(),
      submitText:"立即申请"
    }
  },
  created(){
    var e = this;

    //较验登录
    e.checkLogin(function(){
      console.log("islogin:", e.isLogin);
    
      //商品详情
      e.$http.get(e.proDetailUrl +="?sid=" + e.sid ).then((d)=>{
        var code = d.body.errorCode, msg =d.body.msg;
        if(code == '1' ){
          e.dataArr = d.body.obj;
          e.isTest = false;
        }else{
          Toast(d.body.msg);
        }
      },(err)=>{
        Toast("网络异常");
      });

    });


  },
  mounted(){
   //var e = this;
   //e.cotrolHeight();

   //如果缓存有数据，就读缓存数据
  /* var planVal = localStorage.getItem('planVal');
   $(".inputarea").val(planVal);*/
    this.hideShareMenu();
  
  var _this = this;
		//打点
		_this.$nextTick(function () {
			common.ANA_AnalyticsScan();
		});
  },
  methods:{
     hideShareMenu:function(){
       if(this.isShowShareBtn){
          lb.hideMenu(function (data) {})
       }
    },
    //判断登录
    checkLogin:function( fn ){
      var e = this;
      e.$http.get(e.loginUrl + e.sid).then((d)=>{
        var result = d.body.result, url = d.body.msg;
        if(result == -99 ){
          window.location.href = url;
        }else{
          e.isLogin = true;
          if(typeof fn == "function") fn();
        }
      },(err)=>{
        Toast("网络异常");
      });
    }, 
    //提交
    sub(){
      var e = this, plan = document.getElementsByName("plan")[0];
      if(plan.value==''){
          Toast("请输入众测计划");
          return false;
      }
      else{        
        //计划内容进行浏览器缓存，以免一些特殊原因造成数据丢失        
       /* try{
          localStorage.setItem('planVal', plan.value); 
        }catch(oException){
          if(oException.name == 'QuotaExceededError'){
            console.log('超出本地存储限额！');
            //如果历史信息不重要了，可清空后再设置
            localStorage.clear();
            localStorage.setItem('planVal', plan.value); 
          }
        }*/

        //提交到后台处理 
        e.$http.post(e.submitUrl, {sid: e.sid, msg: plan.value}).then((d)=>{
          var code = d.body.errorCode, msg = d.body.msg;           
          if(code == 1){
            //提交成功弹窗
            e.isSucessTips=true;
            //按钮置灰
            e.isgray=true;
            e.submitText = "已申请";

            //设置一个状态，标识是否以提交过
            sessionStorage.setItem("isSubmit", true);
            window.location.Reload();
          }else{
            Toast(msg);  
          }
        },(err)=>{
            Toast("网络异常"); 
        }); 
      }
    },
    //textarea 高度控制
   /* cotrolHeight(){
      var　winH = window.document.body.offsetHeight, topH = $(".inputarea").offset().top +  $(".inputarea").height(), btnH = $(".sbtn").height(),
      lessH = winH - topH - btnH;
      $(".inputarea").height(lessH);
    },*/
    //字符控制
    limitStr(event) {
      var val = event.target.value;
       if(val.length > 500) event.target.value = val.substr(0,500);
       else return true;
    }
  }
}


</script>